<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>06_元素的删除和插入操作</title>
		<!-- 元素删除和插入操作：针对 元素 增改删
		 append()   功能：在匹配元素集合中所有元素的内部末尾插入内容
		 prepend()  功能：在匹配元素集合中所有的内部开头插入内容
		 
		 after()    功能：在匹配元素集合中所有元素的外部后面插入内容
		 before()   功能：在匹配集合元素中所有元素的外部前面插入内容
		 
		 remove()   功能：使用前提：元素内容，删除元素
		 empty()    功能：使用前提：元素内容，清空元素
		 
		 replaceWith()
		 
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
		 <style>
			 button{
				 margin: 5px;
				 padding: 10px 15px;
				 cursor: pointer;
			 }
			 body{
				 margin: 20px;
			 }
			 #target{
				 border: 1px solid red;
				 border-radius: 10%;
				 margin-top: 10px;
				 padding: 10px;
			 }
			 .wangye{
				 display: block;
				 width: 200px;
				 height: 200px;
				 background: red;
				 color: transparent;
				 border-radius: 50%;
				 background-image: url(../img/王也.png);
				 background-size: 100%;
			 }
		 </style>
	</head>
	<body>
		<!-- 七个按钮 div套p div套p -->
		<button id="appendBtn">内部末尾插入</button>
		<button id="prependBtn">内部开头插入</button>
		<button id="afterBtn">外部后面插入</button>
		<button id="beforeBtn">外部前面插入</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceWithBtn">替换元素</button>
		<!-- 1.目标显示区域 -->
		<div id="target">
			<p>目标元素的默认段落~</p>
		</div>
		<!-- 2.替换和插入元素的块 -->
		<div id="newElement" style="display: none;">
			<p>这是插入和替换的元素块段落~~</p>
		</div>
		<!-- css button添加样式：外边距：5px、内边距：8px 15px 、鼠标移上去有小手
		         body添加样式：外边距20px
				 target添加样式：1px边框  基础倒角 内边距：10px
				                上外边距：10px
				 
		  -->
		  <script>
			  /* 1.点击内部末尾插入的按钮 实现，选框末尾插入新元素 */
		      $("#appendBtn").click(function(){
				  //插入新增元素----1.1创建新元素--复制新元素clone()
				  //根据抓到元素--复制出新元素--包含原有属性和样式
			     var nw=$("#newElement").clone();
				 //复制div加p空间元素，含原有的属性---显示display：block
				 nw.css("display","block");
				 //1.3复制新元素并且改变属性【显示】，插入内部尾部
				 $("#target").append(nw);
			  });
			  /*  */
			  $("#prependBtn").click(function(){
				var pr=$("#newElement").clone().css("display","block");
				 $("#target").prepend(pr);
			  });
			  /*  */
			  $("#afterBtn").click(function(){
			  	var af=$("#newElement").clone().css("display","block");
			  	$("#target").after(af);
			  });
			  /* 4.点击 外部前面插入，按钮 实现，选框外前面插入新元素 */
			  $("#beforeBtn").click(function(){
			  	var be=$("#newElement").clone();
				be.addClass(".wangye");
			  	$("#target").before(be);
			  });
			  /* 5.点击 删除和清空元素 ：真实删除和清空元素操作*/
			  $("#removeBtn").click(function(){
				 $("#target").remove(); 
			  });
			  $("#emptyBtn").click(function(){
			  	$("#target").empty(); 
			  });
			  /* 6.点击  替换元素 按钮 将当前效果替换为新效果*/
			  $("#replaceWithBtn").click(function(){
				  //克隆 新元素效果
				var c=$("#newElement").clone().css("display","block"); 
				$("#target").replaceWith(c);
				
			  });
		  </script>
	</body>
</html>